<template>
  <div v-if="showUI">
    <el-button style="float: right; padding: 3px 0" type="text" @click="getEqs">刷新</el-button>
    <el-table :data="info.eqs.eq" @row-dblclick="toEq">
      <el-table-column property="name" label="板卡名称" width="300" sortable>
        <template slot-scope="scope">
          <span>{{ computeName(scope.row.name) }} </span>
        </template>
      </el-table-column>
      <el-table-column property="shelf" label="所属机框">
        <template slot-scope="scope">
          <span>{{ nodeName }} </span>
        </template>
      </el-table-column>
      <el-table-column property="slot" label="所属槽位" width="100" sortable>
        <template slot-scope="scope">
          <span>{{ computeSlot(scope.row.name) }} </span>
        </template>
      </el-table-column>
      <el-table-column width="150" property="plug-state" label="在位状态">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row['plug-state'] ? 'primary' : 'danger'"
              disable-transitions>{{ scope.row['plug-state'] ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="150" property="eq-type" label="板卡类型">
        <template slot-scope="scope">
          <div v-if="scope.row['eq-type'] instanceof Array">
            <span v-for="(i,key) in scope.row['eq-type']" :key="key">{{ i }}
                   <br v-if="key!==scope.row['eq-type'].length-1">
<!--              <el-divider direction="vertical" v-if="key!==scope.row['eq-type'].length-1"></el-divider>-->
            </span>
          </div>
          <div v-else>
            {{scope.row['eq-type']}}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="150" property="eq-sn" label="SN码"></el-table-column>
      <el-table-column width="auto" property="software-version" label="软件版本"></el-table-column>
      <el-table-column width="auto" property="hardware-version" label="硬件版本"></el-table-column>
      <el-table-column width="150" property="eq-state" label="运行状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "EqList",
  data() {
    return {
      showUI: false,
      nodeName: '',
      info: {
        eqs: {
          "eq": [
            {
              "name": "槽道-1 OTN2X8",
              "plug-state": true,
              shelf: 'otna',
              slot: '1',
              "software-version": "v1.0.8  -2020/8/7 16:50:48",
              "hardware-version": "pcb_ver:1 board_type:none",
              'eq-type': 'Power',
              'eq-sn': 'cd12-322344',
              "ptp": [
                "PTP=/shelf=1/slot=1/subslot=1/port=9",
                "PTP=/shelf=1/slot=1/subslot=1/port=8",
                "PTP=/shelf=1/slot=1/subslot=1/port=10",
                "PTP=/shelf=1/slot=1/subslot=1/port=7"
              ],
              "eq-state": "初始化中···"
            },
            {
              "name": "槽道-2 OTN2X8",
              "plug-state": false,
              shelf: 'otna',
              slot: '1',
              "software-version": "v1.0.8  -2020/8/7 16:50:48",
              "hardware-version": "pcb_ver:1 board_type:none",
              'eq-type': 'Service',
              'eq-sn': 'cd12-fg-44',
              "ptp": [
                "PTP=/shelf=1/slot=1/subslot=1/port=9",
                "PTP=/shelf=1/slot=1/subslot=1/port=8",
                "PTP=/shelf=1/slot=1/subslot=1/port=10",
                "PTP=/shelf=1/slot=1/subslot=1/port=7"
              ],
              "eq-state": "正常工作"
            },
            {
              "name": "槽道-3 OTN2X8",
              "plug-state": false,
              shelf: 'otna',
              slot: '1',
              "software-version": "v1.0.8  -2020/8/7 16:50:48",
              "hardware-version": "pcb_ver:1 board_type:none",
              'eq-type': 'Clock',
              'eq-sn': 'fb12-3223-66',
              "ptp": [
                "PTP=/shelf=1/slot=1/subslot=1/port=9",
                "PTP=/shelf=1/slot=1/subslot=1/port=8",
                "PTP=/shelf=1/slot=1/subslot=1/port=10",
                "PTP=/shelf=1/slot=1/subslot=1/port=7"
              ],
              "eq-state": "故障"
            }
          ]
        },
      }

    }
  },
  methods: {
    computeName(name) {
      let sub = "/EQ=";
      for (let i = 0; i <= (name.length - sub.length); i++) {
        if (name.substring(i, i + sub.length) === sub) {
          return name.substring(i + sub.length, name.length);
        }
      }
    },

    computeSlot(name) {
      let sub = "/slot=";
      for (let i = 0; i <= (name.length - sub.length); i++) {
        if (name.substring(i, i + sub.length) === sub) {
          let slot = name.substring(i + sub.length, name.length);
          return slot.substring(0, slot.indexOf("/"));
        }
      }
    },

    toEq(row, column, event) {
      this.$router.push({
        name: 'EQ',
        params: {
          name: row.name
        }
      })
      console.log(row, column, event);
      console.log('当前行数据', row);
      console.log('当前行DOM', column);
      console.log('当前行事件', event);

    },
    async getEqs() {
      // if (this.nodeName !== '') {
      this.nodeName = this.$route.params.node;
      await axios.get("/topology/node/" + this.nodeName + "/eqs").then(
          response => {
            console.log("请求成功", response.data);
            // eslint-disable-next-line no-prototype-builtins
            if (!response.data.hasOwnProperty("errors")) {
              this.info = response.data;
            } else {
              let error_str = response.data.errors.error[0];
              this.$message.error("【" + error_str['error-tag'] + "】 " + error_str['error-message']);
            }
            // let eqList = response.data;
            // for (let i = 0; i < eqList.length; i++) {
            //   eqList[i].name
            // }
            // this.$message.success("获取设备信息成功");

          },
          error => {
            console.log("失败！", error.message);
            this.$message.error(error.message);
          }
      )
      this.showUI = true;

      // } else {
      //   this.$message.warning("请选择节点后再进行操作 ！")
      // }
    },
  },
  mounted() {
    this.$bus.$on('node-name', (data) => {
      console.log('EqList - node : ', data);
      let n = data.indexOf('(');
      // console.log('------ n: ',n);
      this.nodeName = data.substring(0, n);
      console.log('------ node: ', this.nodeName);
    })

  },
  created() {
    this.getEqs();
  }


}
</script>

<style scoped>

</style>